Menu Generation
Everything's looking good up to this point. We've gotten
most of the XML cleared up and outlined how what's
needed can be extracted using properties of the XML
object in Actionscript. Now all we need is the script to
actually physically make the menu based on all of that.
With the nature of this menu being
created, you have not just a single menu, but a menu
with drop-down submenus as well. What we can do to
streamline this a little bit is to make a single
function to take care of the generation of a single
complete menu. This includes all the items in one menu
node but not including submenus. Submenus would
also be created with this function, but independently of
any other menu as a separate process. So the same
function that creates the main menu will create all of
its submenus and any submenus in those submenus etc.
Lets call this function GenerateMenu.
- GenerateMenu();
Call this once to make the main menu then again for
each submenu when needed (when rolling over a menu item
that contains a submenu). When making a menu, the
GenerateMenu function will need to know a few things.
Things like where and how to make the menu and what xml
node the menu should be based. These can all be passed
in as parameters to that function. Once in there,
GenerateMenu can read through the XML node, attach
menu item movieclips for each node and assign them all
actions corresponding with those specified in the XML
file.
- GenerateMenu(container, name, x, y, depth,
node_xml);
We'll work our way into the specifics as we go.
Giving Actions to Items
The GenerateMenu function, when creating the menu, will
need to assign the appropriate actions to each menu item
as its made. There will be 3 kinds of actions here. One
is the action for a basic item when that item is pressed
as defined in XML. A second action is the opening of a
sub menu if that item is of the type menu. The third
action, which may not be as obvious initially, is the
closing of submenus. Once a submenu is opened, it's not
supposed to remain forever. There are certain
circumstances where that submenu will have to be closed
or another submenu will have to be created in its place
to accommodate for a separate submenu opening. That all
depends on how you define your submenus (or menu in
general) to behave.
The Nature of a Submenu
Submenus are a special entity in navigation. Many have
unique behaviors. This can differ from application to
application as well as operating system to operating
system. How yours behaves is up to you. Beware,
programming for them can get out of hand. For the
purposes of this tutorial, I'll try to keep it simple.
The big challenge with submenus is when to open them and
when to close them. Some navigations, which you may or
may not have encountered in your adventures throughout
the web, are plagued with early the termination of
submenu windows. Often they close before you can even
use them. Others can remain for an annoyingly long time
making navigation difficult and cumbersome. Here's how
this one will be set up.
| object |
event |
action |
| menu |
rollOver |
open up a submenu, replace any
pre-open submenu in the current menu if exists
|
| press |
run XML defined action; close all
submenus |
| item |
rollOver |
close any submenu in the current
menu if exists |
| press |
run XML defined action; close all
submenus that may be open |
| anything else |
mouseUp |
close all submenus that may be
open |
Lets look back to a working version of the menu
system we're developing. How does it compare to others?
Hopefully fairly well since it isn't changing! :)
[ menu
in Flash defined with XML ]
Submenu Hierarchy
When a submenu is created, its created within the
movieclip of the menu that opened it. This is much like
its very organization, and the organization of the XML
for that matter. This also makes it much easier to
manage, especially when submenus of that submenu is
created within that submenu's movieclip. This way, if
you were to remove any one submenu, all submenus of that
submenu are removed with it.
[
submenus kept in menus which created them ]
Notice from the diagram, if you were to remove the
submenu, the submenu of submenu would be
removed with it as it is a part of that menu movieclip -
attached within it. And when might that submenu be
removed? It would be removed whenever you click on any
menu option (item or menu), when another menu item other
than the one which opened the submenu is rolled over or
when the user clicks anywhere other than on the menu.
No problem right? Now lets translate all this into
working functional code.
XML-Driven Drop-Down Menu
Prev Page
